<template>
  <div class="container">
    <!-- 标题 -->
    <h2>{{ itemArticle.title }}</h2>
    <!-- 时间, 管理员, 浏览量 -->
    <div class="preview-header">
      <span>{{ itemArticle.createTime }}</span>
      <span>{{ itemArticle.username }}</span>
      <span class="el-icon-view"></span>
      <span>{{ itemArticle.visits }}</span>
    </div>
    <!-- 内容主体 -->
    <div v-html="itemArticle.articleBody" class="preview-main"></div>
  </div>
</template>

<script>
export default {
  name: 'ArticlePreview',
  props: {
    itemArticle: {
      type: Object,
      default: () => {
        return {}
      }
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  h2 {
    margin: 0;
  }
  .preview-header {
    padding-left: 10px;
    height: 30px;
    span {
      line-height: 30px;
      margin-right: 10px;
    }
  }
  // 内容主体
  .preview-main {
    padding: 10px;
    background: #f5f5f5;
    border-top: 1px dashed #ccc;
  }
}
</style>
